<template>
  <div class="c-base-form">
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column
        v-for="(item, index) in tableFields"
        :key="index"
        :label="item"
        :prop="item"
        fit="true"
        header-row-class-name="headerClass"
        min-width="100"
        row-class-name="rowClass"
      ></el-table-column>
    </el-table>
    <div class="c-base_pagination">
      <el-pagination
        v-if="tableData.length > 0 && paging"
        :total="total"
        background
        layout="prev, pager, next"
        @current-change="changPage"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import moment from 'moment'
import componentRefresh from '@/mixins/componentRefresh'
const DATA = [
  { 新增确诊: 10, 新增疑似: 3, 新增治愈: 15, 新增死亡: 0 },
  { 新增确诊: 2, 新增疑似: 13, 新增治愈: 10, 新增死亡: 0 },
  { 新增确诊: 12, 新增疑似: 1, 新增治愈: 6, 新增死亡: 1 },
  { 新增确诊: 5, 新增疑似: 15, 新增治愈: 16, 新增死亡: 0 }
]
export default {
  name: 'CBaseForm',
  mixins: [componentRefresh],
  props: {
    props: {
      type: Array,
      default: function() {
        return [
          {
            fields: []
          }
        ]
      }
    },
    uuid: String
  },
  data() {
    return {
      tableData: [],
      tableFields: []
    }
  },
  computed: {
    dataTrigger() {
      if (this.props[1].fields[0].value.dataJson.json) {
        const result = this.props[1].fields[0].value.dataJson.json
        return JSON.parse(result)
      } else {
        return DATA
      }
    },
    total() {
      if (this.props[1].fields[0].value.dataJson.data.paging.total) {
        return this.props[1].fields[0].value.dataJson.data.paging.total
      } else {
        return DATA.length
      }
    },
    paging() {
      return this.total > this.props[1].fields[0].value.dataJson.data.paging.pageSize
    }
  },
  watch: {
    dataTrigger() {
      this.initData()
    },
    paging(val) {
      if (val) {
        this.props[1].fields[0].value.dataJson.data.paging.pageIndex = 1
      }
    }
  },
  created() {
    this.initData()
  },
  methods: {
    changPage(pageIndex) {
      this.props[1].fields[0].value.dataJson.data.paging.pageIndex = pageIndex
    },
    initData() {
      const header = this.getHeader(this.dataTrigger)
      this.tableData = this.formatDate(this.dataTrigger)
      this.tableFields = header
    },
    getHeader(data) {
      if (Array.isArray(data) && data.length > 0) {
        return Object.keys(data[0])
      } else {
        return []
      }
    },
    formatDate(data) {
      data.forEach(element => {
        const keys = Object.keys(element)
        keys.forEach(k => {
          const value = element[k]
          if (/^([0-9]{4})-([0-1][0-9])-([0-3][0-9]).+/.test(value)) {
            element[k] = moment(value).format('YYYY-MM-DD')
          }
        })
      })
      return data
    }
  }
}
</script>

<style lang="stylus" scoped>
.c-base_pagination {
	display: flex;
	height: 50px;
	justify-content: flex-end;
	align-items: center;
}
</style>
